<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
      <el-form-item label="消息标题" prop="firstData">
        <el-input
          v-model="queryParams.firstData"
          placeholder="请输入消息标题"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['message:wxmessage:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['message:wxmessage:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['message:wxmessage:remove']"
        >删除</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['message:wxmessage:export']"
        >导出</el-button>
      </el-col>
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
<el-row :gutter="20" >
  <el-col :lg="6" v-for="(it) in wxmessageList" :key="it.id" >
    <el-card class="box-card" v-if="it.templateType==6">
      <div slot="header" class="clearfix text">
        <span>报名提醒</span>
      </div>
      <div class="text item" >
        <p>{{it.firstData}}</p>
        <p :style="{'color':it.keyword3Color}">联系人:&nbsp;{{it.keyword3Data}}</p>
        <p :style="{'color':it.keyword4Color}">电话:&nbsp;{{it.keyword4Data}}</p>
        <p :style="{'color':it.keyword2Color}">地点:&nbsp;{{it.keyword2Data}}</p>
        <span :style="{'color':it.keyword1Color}" v-html="'&nbsp;&nbsp;&nbsp;时间:&nbsp;'+it.keyword1Data">  </span>
        <p style="{'color':it.remarkColor}">备注:&nbsp;{{it.remark}}</p>
        <el-button style="float: right" size="mini" type="warning">立即发送</el-button>
        <el-button type="primary" size="mini" style="float:right; margin-right: 10px;" icon="el-icon-edit" @click="handleUpdate(it)"></el-button>
        <el-button type="primary" size="mini" style="float:right;" icon="el-icon-delete"></el-button>
      </div>
    </el-card>
    
  </el-col>
  <el-col :lg="6" v-for="(it,index) in wxmessageList" :key="index" >
    <el-card class="box-card" v-if="it.templateType==5">
      <div slot="header" class="clearfix text">
        <span>文件查看提醒</span>
      </div>
      <div class="text item" >
        <p>{{it.firstData}}</p>
        <p :style="{'color':it.keyword1Color}">文件名称:&nbsp;{{it.keyword1Data}}</p>
        <p :style="{'color':it.keyword2Color}">提醒人员:&nbsp;{{it.keyword2Data}}</p>
        
        <span :style="{'color':it.keyword3Color}" v-html="'&nbsp;&nbsp;&nbsp;提醒时间:&nbsp;'+it.keyword3Data">  </span>
        <p :style="{'color':it.remarkColor}">备注:&nbsp;{{it.remark}}</p>
        <el-button style="float: right" size="mini" type="warning">立即发送</el-button>
        <el-button type="primary" size="mini" style="float:right; margin-right: 10px;" icon="el-icon-edit" @click="handleUpdate(it)"></el-button>
        <el-button type="primary" size="mini" style="float:right;" icon="el-icon-delete"></el-button>
      </div>
    </el-card>
    </el-col>
    <el-col :lg="6" v-for="(it,index) in wxmessageList" :key="index" >
    <el-card class="box-card" v-if="it.templateType==1">
      <div slot="header" class="clearfix text">
        <span>会议提醒</span>
      </div>
      <div class="text item" >
        <p>{{it.firstData}}</p>
        <p :style="{'color':it.keyword1Color}">会议名称:&nbsp;{{it.keyword1Data}}</p>
        <span :style="{'color':it.keyword2Color}" v-html="'&nbsp;&nbsp;&nbsp;会议时间:&nbsp;'+it.keyword2Data">  </span>
        <p :style="{'color':it.remarkColor}">备注:&nbsp;{{it.remark}}</p>
        <el-button style="float: right" size="mini" type="warning">立即发送</el-button>
        <el-button type="primary" size="mini" style="float:right; margin-right: 10px;" icon="el-icon-edit" @click="handleUpdate(it)"></el-button>
        <el-button type="primary" size="mini" style="float:right;" icon="el-icon-delete"></el-button>
      </div>
    </el-card>
    </el-col>
  </el-row>  
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <!-- 添加或修改系统消息对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-row :gutter="20">
        <el-form-item label="消息标题" prop="asId">
          <el-input v-model="form.firstData" placeholder="请输入消息标题" />
        </el-form-item>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="12" :lg="12">
          <el-form-item label="联系人" prop="userId">
          <el-input v-model="form.userId" placeholder="请输入用户ID" />
          </el-form-item>
          </el-col>
           <el-col :xs="12" :lg="12">
             <el-color-picker v-model="color1"></el-color-picker>
           </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="12" :lg="12">
            <el-form-item label="电话" prop="templateId">
          <el-input v-model="form.templateId" placeholder="请输入消息模板ID" />
        </el-form-item>
        
          </el-col>
          <el-col :xs="12" :lg="12">
             <el-color-picker v-model="color1"></el-color-picker>
           </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :xs="12" :lg="12">
          <el-form-item label="项目" prop="firstData">
          <el-input v-model="form.firstData" placeholder="请输入消息标题" />
        </el-form-item>
          </el-col>
          <el-col :xs="12" :lg="12">
             <el-color-picker v-model="color1"></el-color-picker>
           </el-col>
        </el-row>
        <el-row :gutter="20">
        <el-col :xs="12" :lg="12">
        <el-form-item label="时间" prop="firstColor">
          <el-input v-model="form.firstColor" placeholder="请输入颜色" />
        </el-form-item>
          </el-col>
          <el-col :xs="12" :lg="12">
             <el-color-picker v-model="color1"></el-color-picker>
           </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :xs="12" :lg="12">
        <el-form-item label="备注内容" prop="keyword1Data">
          <el-input v-model="form.keyword1Data" placeholder="请输入keyword1内容" />
        </el-form-item>
          </el-col>
          <el-col :xs="12" :lg="12">
             <el-color-picker v-model="color1"></el-color-picker>
           </el-col>
        </el-row>
        <el-form-item label="跳转地址" prop="linkUrl">
          <el-input v-model="form.linkUrl" type="textarea" placeholder="请输入内容" />
        </el-form-item>
        <el-form-item label="接收人员" prop="openids">
      <el-form :model="userqueryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="68px">
         
      <el-form-item label="昵称" prop="nickName">
        <el-input
          v-model="userqueryParams.nickName"
          placeholder="请输入昵称"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="真实姓名" prop="realName">
        <el-input
          v-model="userqueryParams.realName"
          placeholder="请输入真实姓名"
          clearable
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="入会角色" prop="roleId">
      <el-select v-model="userqueryParams.roleId" placeholder="请选择">
      <el-option
      v-for="item in roleList"
      :key="item.id"
      :label="item.roleName"
      :value="item.id">
      </el-option>
      </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
      <el-table v-loading="loading" :data="userList" @selection-change="handleSelectionChange"  height="250" border>
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="序号" align="center" type="index" :index="createIndex" fixed="left"/>

      <el-table-column label="昵称" align="center" prop="nickName" />
      <el-table-column label="职务" align="center" prop="roleName" />
      <el-table-column label="真实姓名" align="center" prop="realName" />
      <el-table-column label="头像地址" align="center" prop="headUrl">
          <!-- 图片的显示 -->
                 <template   slot-scope="scope">            
                    <img :src="scope.row.headUrl"  min-width="70" height="70" 
                           @click="previewPic(scope.row.headUrl)" />
                 </template>     
   
      </el-table-column>
    </el-table>
    
    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="userqueryParams.pageNum"
      :limit.sync="userqueryParams.pageSize"
      @pagination="getUserList"
    />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
        <!-- 图片预览   放在表格外面，这是个弹出框-->
      <el-dialog :visible.sync="dialogVisible" :modal="false" title="图片预览" width="50%">
        <img :src="previewpic" alt=""  width="100%" />
        <span slot="footer" class="dialog-footer">
          </span>
       </el-dialog>
  <!-- 图片预览 -->
  </div>
</template>

<script>
import { listWxmessage, getWxmessage, delWxmessage, addWxmessage, updateWxmessage } from "@/api/message/wxmessage";
import { listUser} from "@/api/allocation/user";
import { listRole} from "@/api/allocation/role";
export default {
  name: "Wxmessage",
  dicts: ['sys_member_audit_type','sys_user_type','sys_platform_type','sys_user_sex'],
  data() {
    return {
     dialogVisible: false,
      previewpic: "",    
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      color1:'#000000',
      // 系统消息表格数据
      wxmessageList: [],
      //入会角色list
      roleList:[],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      userList:[],
      //查询角色
      rolequeryparams:{
        pageNum: 1,
        pageSize: 10,
        id:null,
        asId:null,
        roleName:null
      },
        
      
      //查询微信用户
      userqueryParams:{
        pageNum: 1,
        pageSize: 10,
        asId: null,
        roleId:null,
        nickName:null,
        realName:null
      },
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        asId: null,
        userId: null,
        templateType: null,
        templateId: null,
        firstData: null,
        firstColor: null,
        keyword1Data: null,
        keyword1Color: null,
        keyword2Data: null,
        keyword2Color: null,
        keyword3Data: null,
        keyword3Color: null,
        keyword4Data: null,
        keyword4Color: null,
        keyword5Data: null,
        keyword5Color: null,
        keyword6Data: null,
        keyword6Color: null,
        keyword7Data: null,
        keyword7Color: null,
        keyword8Data: null,
        keyword8Color: null,
        keyword9Data: null,
        keyword9Color: null,
        remarkColor: null,
        linkUrl: null,
        openids: null,
        status: 0,
        isSee: null
       
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        asId: [
          { required: true, message: "协会ID不能为空", trigger: "blur" }
        ],
        userId: [
          { required: true, message: "用户ID不能为空", trigger: "blur" }
        ],
        templateType: [
          { required: true, message: "消息类型：0审批通知，1活动/会议提醒，2缴费通知，3会议通知A，4会议通知B不能为空", trigger: "change" }
        ],
        templateId: [
          { required: true, message: "消息模板ID不能为空", trigger: "blur" }
        ],
        createTime: [
          { required: true, message: "创建时间不能为空", trigger: "blur" }
        ],
        updateTime: [
          { required: true, message: "修改时间不能为空", trigger: "blur" }
        ],
        status: [
          { required: true, message: "状态不能为空", trigger: "blur" }
        ],
      }
    };
  },
  created() {
    this.getList();
    this.getUserList();
  },
  methods: {
      createIndex(index){
      return (this.queryParams.pageNum - 1) *this.queryParams.pageSize + index + 1;
    },
    /** 查询系统消息列表 */
    getList() {
      this.loading = true;
      listWxmessage(this.queryParams).then(res => {
        console.info(res);
        this.wxmessageList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
     //图片放大
    previewPic(url) {
    this.previewpic = url;
    this.dialogVisible = true;
        }, 
      /** 查询微信用户列表 */
    getUserList() {
      this.loading = true;
      listUser(this.userqueryParams).then(res => {
        console.info(res);
        this.userList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
    },
    del(data){
      console.info(data);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        asId: null,
        userId: null,
        templateType: null,
        templateId: null,
        firstData: null,
        firstColor: null,
        keyword1Data: null,
        keyword1Color: null,
        keyword2Data: null,
        keyword2Color: null,
        keyword3Data: null,
        keyword3Color: null,
        keyword4Data: null,
        keyword4Color: null,
        keyword5Data: null,
        keyword5Color: null,
        keyword6Data: null,
        keyword6Color: null,
        keyword7Data: null,
        keyword7Color: null,
        keyword8Data: null,
        keyword8Color: null,
        keyword9Data: null,
        keyword9Color: null,
        remark: null,
        remarkColor: null,
        linkUrl: null,
        openids: null,
        createTime: null,
        updateTime: null,
        status: 0,
        isSee: null
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.userqueryParams.pageNum = 1;
      this.getUserList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加系统消息";
    listUser(this.userqueryParams).then(res => {
        this.userList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
     listRole(this.queryParams).then(res=>{
        console.info(res);
        this.roleList=res.rows;
      });  
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getWxmessage(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改系统消息";
      });
       listUser(this.userqueryParams).then(res => {
        this.userList = res.rows;
        this.total = res.total;
        this.loading = false;
      });
      listRole(this.queryParams).then(res=>{
        console.info(res);
        this.roleList=res.rows;
      });    
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateWxmessage(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addWxmessage(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除系统消息编号为"' + ids + '"的数据项？').then(function() {
        return delWxmessage(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('message/wxmessage/export', {
        ...this.queryParams
      }, `wxmessage_${new Date().getTime()}.xlsx`)
    }
  }
};
</script>
<style >
p{
  white-space: pre-wrap;
margin-left: 10px;
}
.box{
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
}
.btn{
 display: flex;
 justify-content: center;
 align-items: center;
}
.text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
   width: auto;
   margin-top: 10px;
  }

</style>
